<template>
  <div class="nav_outer">
    <Header tooltext="保存" @herttool="savexpect">求职意向</Header>
    <div class="content">
      <div class="edits">
        <div class="edit" @click="tochooseCity">
          <div class="edit_title">期望城市</div>
          <div class="edit_conten oheight">{{expectWorkCityName}}</div>
        </div>
        <div class="edit">
          <div class="edit_title">期望薪资</div>
          <div class="edit_conten">
            <input type="text" placeholder="请输入" v-model="expectSalary" />
          </div>
        </div>
        <div class="edit">
          <div class="edit_title">期望岗位</div>
          <div class="edit_conten">
            <input type="text" placeholder="请输入" v-model="expectJobTitle" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/commonComponents/Header";
export default {
  data() {
    return {
      expectSalary: "",
      expectJobTitle: "",
      expectWorkCityName: "",
      expectWorkCityId: "",
      expectId: ""
    };
  },
  created() {
    let cityname = this.$route.query.name,
      cityid = this.$route.query.id;
    this.loadDetail();
    cityname && (this.expectWorkCityName = cityname);
    cityid && (this.expectWorkCityId = cityid);
  },
  mounted() {
    let mui = this.mui;
    this.picker = new mui.PopPicker();
    this.dtPicker = new mui.DtPicker({ type: "date" });
    this.sexpicker = new mui.PopPicker();
    this.sexpicker.setData([
      { value: "1", text: "男" },
      { value: "2", text: "女" }
    ]);
  },
  methods: {
    loadDetail() {
      let expect = JSON.parse(localStorage.getItem("expect"));
      if (expect) {
        this.expectSalary = expect.expectSalary;
        this.expectJobTitle = expect.expectJobTitle;
        this.expectWorkCityName = expect.expectWorkCityName;
        this.expectWorkCityId = expect.expectWorkCityId;
        this.expectId = expect.id;
      }
    },
    tochooseCity() {
      let data = {
        expectJobTitle: this.expectJobTitle,
        expectSalary: this.expectSalary,
        expectWorkCityId: this.expectWorkCityId,
        expectWorkCityName: this.expectWorkCityName,
        id: this.expectId || ""
      };
      localStorage.setItem("expect", JSON.stringify(data));
      this.$router.replace("/selectcity");
    },
    savexpect() {
      let type;
      let data = {
        customerId: localStorage.getItem("uid"),
        expectJobTitle: this.expectJobTitle,
        expectSalary: this.expectSalary,
        expectWorkCityId: this.expectWorkCityId,
        expectWorkCityName: this.expectWorkCityName
      };
      if (this.expectId) {
        type = "put";
        data.id = this.expectId;
      } else {
        type = "post";
      }
      this.Http[type](`/yzj/personal/app/job_intention`, data).then(res => {
        this.$router.replace("/resume");
      });
    }
  },
  components: {
    Header
  }
};
</script>

<style scoped lang='scss'>
@function px2em($px) {
  @if (unitless($px)) {
    @return px2em($px + 0px);
  } @else if (unit($px) == em) {
    @return $px;
  }
  @return ($px / 75px) * 1rem;
}
body {
  background: #f5f5f5 !important;
}
.content {
  color: #666;
  .ava {
    width: px2em(96);
    height: px2em(96);
    background: #ccc;
    border-radius: 50%;
    display: inline-block;
  }
  .edit {
    margin-top: px2em(10);
    background: #fff;
    display: flex;
    align-items: center;
    padding: px2em(16) px2em(28);
    .edit_conten {
      flex: 1;
      margin-left: 15px;
      text-align: right;
    }
    input {
      text-align: right;
      color: #333;
      font-size: 0.9em;
      padding-right: 0;
      &::-webkit-input-placeholder {
        color: #999;
      }
    }
  }
}
.oheight {
  height: 40px;
  line-height: 40px;
}
</style>